<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-10-21 15:13:58
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-10-24 11:08:31
 * @FilePath: /hr_new_vue3/src/views/Management/Human/ChangeManagement/LeaveManagement/WaitLeave/Components/LeaveHandover/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 工作交接详情 -->
<template>
  <ContentCard class="wrap">
    <template #header>
      <pageHeaderNew title="工作交接详情" showBack></pageHeaderNew>
    </template>
    <main>
      <header class="main-header">工作交接表</header>
      <section>
        <header>基础信息</header>
        <div>
          <a-form disabled>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item field="value1" label="离职人员姓名" showColon>
                  <a-input placeholder="自动获取" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="value2" label="手机号码" showColon>
                  <a-input placeholder="自动获取" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item field="value1" label="部门" showColon>
                  <a-input placeholder="自动获取" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="value2" label="职位" showColon>
                  <a-input placeholder="自动获取" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item field="value1" label="直接上级" showColon>
                  <a-input placeholder="自动获取" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="value2" label="离职时间" showColon>
                  <a-input placeholder="自动获取" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </section>
      <a-form :model="formData" ref="refForm">
        <section>
          <header>文件移交</header>
          <a-form-item hide-label no-style>
            <a-table :data="formData.wenJian">
              <template #columns>
                <a-table-column title="文件名称" :width="200" dataIndex="name">
                  <template #title>
                    <span class="star">文件名称</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`wenJian.${rowIndex}.name`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入文件名称'
                        }
                      ]"
                      hide-label
                    >
                      <a-input v-model="record.name" />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column
                  title="文件交接说明"
                  :width="200"
                  dataIndex="remark"
                >
                  <template #title>
                    <span class="star">文件交接说明</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`wenJian.${rowIndex}.remark`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入文件交接说明'
                        }
                      ]"
                      hide-label
                    >
                      <a-input v-model="record.remark" />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="数量" :width="200" dataIndex="num">
                  <template #title>
                    <span class="star">数量</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`wenJian.${rowIndex}.num`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入数量，最小值为1'
                        }
                      ]"
                      hide-label
                    >
                      <a-input-number
                        hide-button
                        :min="1"
                        v-model="record.num"
                      />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="交接人" :width="200" dataIndex="ownerId">
                  <template #title>
                    <span class="star">交接人</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`wenJian.${rowIndex}.userId`"
                      :rules="[
                        {
                          required: true,
                          message: '请选择交接人'
                        }
                      ]"
                      hide-label
                    >
                      <a-select
                        placeholder="请选择"
                        v-model="record.userId"
                        allow-search
                        allow-clear
                        @popup-visible-change="
                          showHumanModal(rowIndex, 'wenJian')
                        "
                        :popup-visible="false"
                      >
                        <a-option
                          v-for="item in humanList"
                          :value="item.id"
                          :key="item.id"
                          :label="item.name"
                        ></a-option>
                      </a-select>
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="操作" :width="100" fixed="right">
                  <template #cell="{ record, rowIndex }">
                    <a-tooltip content="新增">
                      <IconFont
                        class="icon"
                        type="icon-add-def"
                        :size="24"
                        @click="add(rowIndex, 'wenJian')"
                      ></IconFont>
                    </a-tooltip>
                    <a-tooltip
                      content="删除"
                      v-if="formData.wenJian.length > 1"
                    >
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                        @click="del(record.id, rowIndex, 'wenJian')"
                      ></IconFont>
                    </a-tooltip>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-form-item>
        </section>

        <section>
          <header>日常工作移交</header>
          <a-form-item hide-label no-style>
            <a-table :data="formData.riChang">
              <template #columns>
                <a-table-column title="工作事项" :width="200" dataIndex="name">
                  <template #title>
                    <span class="star">工作事项</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`riChang.${rowIndex}.name`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入工作事项'
                        }
                      ]"
                      hide-label
                    >
                      <a-input v-model="record.name" />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column
                  title="工作事项情况说明"
                  :width="200"
                  dataIndex="remark"
                >
                  <template #title>
                    <span class="star">工作事项情况说明</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`riChang.${rowIndex}.remark`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入工作事项情况说明'
                        }
                      ]"
                      hide-label
                    >
                      <a-input v-model="record.remark" />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="交接人" :width="200" dataIndex="ownerId">
                  <template #title>
                    <span class="star">交接人</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`riChang.${rowIndex}.userId`"
                      :rules="[
                        {
                          required: true,
                          message: '请选择交接人'
                        }
                      ]"
                      hide-label
                    >
                      <a-select
                        placeholder="请选择"
                        v-model="record.userId"
                        allow-search
                        allow-clear
                        @popup-visible-change="
                          showHumanModal(rowIndex, 'riChang')
                        "
                        :popup-visible="false"
                      >
                        <a-option
                          v-for="item in humanList"
                          :value="item.id"
                          :key="item.id"
                          :label="item.name"
                        ></a-option>
                      </a-select>
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="操作" :width="100" fixed="right">
                  <template #cell="{ record, rowIndex }">
                    <a-tooltip content="新增">
                      <IconFont
                        class="icon"
                        type="icon-add-def"
                        :size="24"
                        @click="add(rowIndex, 'riChang')"
                      ></IconFont>
                    </a-tooltip>
                    <a-tooltip
                      content="删除"
                      v-if="formData.riChang.length > 1"
                    >
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                        @click="del(record.id, rowIndex, 'riChang')"
                      ></IconFont>
                    </a-tooltip>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-form-item>
        </section>

        <section>
          <header>未完待办事项</header>
          <a-form-item hide-label no-style>
            <a-table :data="formData.daiBan">
              <template #columns>
                <a-table-column title="事项" :width="200" dataIndex="name">
                  <template #title>
                    <span class="star">事项</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`daiBan.${rowIndex}.name`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入事项'
                        }
                      ]"
                      hide-label
                    >
                      <a-input v-model="record.name" />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column
                  title="事项情况说明"
                  :width="200"
                  dataIndex="remark"
                >
                  <template #title>
                    <span class="star">事项情况说明</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`daiBan.${rowIndex}.remark`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入事项情况说明'
                        }
                      ]"
                      hide-label
                    >
                      <a-input v-model="record.remark" />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="交接人" :width="200" dataIndex="ownerId">
                  <template #title>
                    <span class="star">交接人</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`daiBan.${rowIndex}.userId`"
                      :rules="[
                        {
                          required: true,
                          message: '请选择交接人'
                        }
                      ]"
                      hide-label
                    >
                      <a-select
                        placeholder="请选择"
                        v-model="record.userId"
                        allow-search
                        allow-clear
                        @popup-visible-change="
                          showHumanModal(rowIndex, 'daiBan')
                        "
                        :popup-visible="false"
                      >
                        <a-option
                          v-for="item in humanList"
                          :value="item.id"
                          :key="item.id"
                          :label="item.name"
                        ></a-option>
                      </a-select>
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="操作" :width="100" fixed="right">
                  <template #cell="{ record, rowIndex }">
                    <a-tooltip content="新增">
                      <IconFont
                        class="icon"
                        type="icon-add-def"
                        :size="24"
                        @click="add(rowIndex, 'daiBan')"
                      ></IconFont>
                    </a-tooltip>
                    <a-tooltip content="删除" v-if="formData.daiBan.length > 1">
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                        @click="del(record.id, rowIndex, 'daiBan')"
                      ></IconFont>
                    </a-tooltip>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-form-item>
        </section>

        <section>
          <header>资产移交</header>
          <a-form-item hide-label no-style>
            <a-table :data="formData.ziChan">
              <template #columns>
                <a-table-column title="资产名称" :width="200" dataIndex="name">
                  <template #title>
                    <span class="star">资产名称</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`ziChan.${rowIndex}.name`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入资产名称'
                        }
                      ]"
                      hide-label
                    >
                      <a-input v-model="record.name" />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="数量" :width="200" dataIndex="num">
                  <template #title>
                    <span class="star">数量</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`ziChan.${rowIndex}.num`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入数量,最小为1'
                        }
                      ]"
                      hide-label
                    >
                      <a-input-number
                        hide-button
                        :min="1"
                        v-model="record.num"
                      />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="用途" :width="200" dataIndex="remark">
                  <template #title>
                    <span class="star">用途</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`ziChan.${rowIndex}.remark`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入用途'
                        }
                      ]"
                      hide-label
                    >
                      <a-input v-model="record.remark" />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="交接人" :width="200" dataIndex="ownerId">
                  <template #title>
                    <span class="star">交接人</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`ziChan.${rowIndex}.userId`"
                      :rules="[
                        {
                          required: true,
                          message: '请选择交接人'
                        }
                      ]"
                      hide-label
                    >
                      <a-select
                        placeholder="请选择"
                        v-model="record.userId"
                        allow-search
                        allow-clear
                        @popup-visible-change="
                          showHumanModal(rowIndex, 'ziChan')
                        "
                        :popup-visible="false"
                      >
                        <a-option
                          v-for="item in humanList"
                          :value="item.id"
                          :key="item.id"
                          :label="item.name"
                        ></a-option>
                      </a-select>
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="操作" :width="100" fixed="right">
                  <template #cell="{ record, rowIndex }">
                    <a-tooltip content="新增">
                      <IconFont
                        class="icon"
                        type="icon-add-def"
                        :size="24"
                        @click="add(rowIndex, 'ziChan')"
                      ></IconFont>
                    </a-tooltip>
                    <a-tooltip content="删除" v-if="formData.ziChan.length > 1">
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                        @click="del(record.id, rowIndex, 'ziChan')"
                      ></IconFont>
                    </a-tooltip>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-form-item>
        </section>

        <section>
          <header>资源移交</header>
          <a-form-item hide-label no-style>
            <a-table :data="formData.ziYuan">
              <template #columns>
                <a-table-column title="资源名称" :width="200" dataIndex="name">
                  <template #title>
                    <span class="star">资源名称</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`ziYuan.${rowIndex}.name`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入资源名称'
                        }
                      ]"
                      hide-label
                    >
                      <a-input v-model="record.name" />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="资源上传" :width="200" dataIndex="url">
                  <template #title>
                    <span class="star">资源上传</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`ziYuan.${rowIndex}.url`"
                      :rules="[
                        {
                          required: true,
                          message: '请上传文件，每个资源只能上传一个文件'
                        }
                      ]"
                      hide-label
                    >
                      <a-upload
                        ref="uploadRef"
                        v-model:file-list="record.url"
                        action="http://192.168.0.178:30058/lke_file"
                        @success="
                          (fileItem, recordRes) => uploadFile(fileItem, record)
                        "
                        download
                        @before-remove="
                          (file, recordRes) => beforeFileRemove(file, record)
                        "
                        @before-upload="
                          (file, recordRes) => beforeFileUpload(file, record)
                        "
                      />
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="交接人" :width="200" dataIndex="ownerId">
                  <template #title>
                    <span class="star">交接人</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      :field="`ziYuan.${rowIndex}.userId`"
                      :rules="[
                        {
                          required: true,
                          message: '请选择交接人'
                        }
                      ]"
                      hide-label
                    >
                      <a-select
                        placeholder="请选择"
                        v-model="record.userId"
                        allow-search
                        allow-clear
                        @popup-visible-change="
                          showHumanModal(rowIndex, 'ziYuan')
                        "
                        :popup-visible="false"
                      >
                        <a-option
                          v-for="item in humanList"
                          :value="item.id"
                          :key="item.id"
                          :label="item.name"
                        ></a-option>
                      </a-select>
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="操作" :width="100" fixed="right">
                  <template #cell="{ record, rowIndex }">
                    <a-tooltip content="新增">
                      <IconFont
                        class="icon"
                        type="icon-add-def"
                        :size="24"
                        @click="add(rowIndex, 'ziYuan')"
                      ></IconFont>
                    </a-tooltip>
                    <a-tooltip content="删除" v-if="formData.ziYuan.length > 1">
                      <IconFont
                        class="icon"
                        type="icon-delete"
                        :size="24"
                        @click="del(record.id, rowIndex, 'ziYuan')"
                      ></IconFont>
                    </a-tooltip>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-form-item>
        </section>

        <section>
          <header>备注</header>
          <a-textarea
            v-model="formData.remark[0].remark"
            show-word-limit
            allow-clear
            placeholder="请输入"
            :auto-size="{
              minRows: 5
            }"
          >
          </a-textarea>
        </section>
      </a-form>
    </main>

    <footer>
      <a-button
        class="btn"
        style="
          margin-right: 20px;
          border: 1px rgba(242, 242, 242, 1) solid;
          background-color: #fff;
        "
        @click="$router.go(-1)"
        >返回</a-button
      >
      <a-button class="btn" type="primary" @click="save">保存</a-button>
    </footer>
  </ContentCard>
  <HumanRosterModal
    v-model:visible="humanModalVisible"
    @humanRosterEmit="humanRosterEmit"
  ></HumanRosterModal>
</template>

<script lang="ts" setup>
import {
  GetLeaveHandoverDetail,
  PostLeaveHandoverDetail,
  DelLeaveHandoverDetail
} from '@/apis/management/human/humanChange/leave';
import { PostFile } from '@/apis/management/base';
import {
  GetHumanRosterList,
  GetHumanRosterDetail
} from '@/apis/management/human/humanRoster';
import HumanRosterModal from '@/components/HumanRosterModal/index.vue';
import { cloneDeep } from 'lodash';
import { Modal, Message } from '@arco-design/web-vue';

const route = useRoute();

const id = +route.query.id as number;
let refForm = ref();
const formData = reactive({
  daiBan: [],
  remark: [
    {
      remark: '',
      type: 6
    }
  ],
  riChang: [],
  wenJian: [],
  ziChan: [],
  ziYuan: []
});

let humanList = ref(), // 储存人员信息
  humanDetail = ref();

const addInfo = {
  name: '',
  remark: '',
  num: 1,
  userId: undefined,
  type: 1,
  ownerId: id,
  url: ''
};
const getData = async () => {
  try {
    const [leaveHandoverDetailRes, humanListRes] = await Promise.all([
      GetLeaveHandoverDetail({
        id
      }),
      GetHumanRosterList({
        pageNumber: 0,
        pageSize: -1,
        typeName: '5'
      })
    ]);
    for (let i in leaveHandoverDetailRes) {
      if (i === 'ziYuan') {
        leaveHandoverDetailRes[i].forEach((item: any) => {
          item.url = JSON.parse(item.url);
        });
      }
      if (leaveHandoverDetailRes[i].length === 0) {
        // 如果是remark则不用赋值，不然页面会渲染不出来
        if (i !== 'remark') formData[i].push(cloneDeep(addInfo));

        // 将type赋值
        switch (i) {
          case 'wenJian':
            formData[i][0].type = 1;
            break;
          case 'riChang':
            formData[i][0].type = 2;
            break;
          case 'daiBan':
            formData[i][0].type = 3;
            break;
          case 'ziChan':
            formData[i][0].type = 4;
            break;
          case 'ziYuan':
            formData[i][0].type = 5;
            break;
          case 'remark':
            formData[i][0].type = 6;
            break;
          default:
            break;
        }
      } else formData[i] = leaveHandoverDetailRes[i];
    }
    console.log('🚀 ~ file: index.vue:464 ~ getData ~ formData:', formData);
    humanList.value = humanListRes.content;
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

const add = (
  index: number,
  type: 'wenJian' | 'ziChan' | 'ziYuan' | 'riChang' | 'daiBan'
) => {
  switch (type) {
    case 'wenJian':
      formData[type].splice(index + 1, 0, {
        ...cloneDeep(addInfo),
        type: 1
      });
      break;
    case 'riChang':
      formData[type].splice(index + 1, 0, {
        ...cloneDeep(addInfo),
        type: 2
      });
      break;
    case 'daiBan':
      formData[type].splice(index + 1, 0, {
        ...cloneDeep(addInfo),
        type: 3
      });
      break;
    case 'ziChan':
      formData[type].splice(index + 1, 0, {
        ...cloneDeep(addInfo),
        type: 4
      });
      break;
    case 'ziYuan':
      formData[type].splice(index + 1, 0, {
        ...cloneDeep(addInfo),
        type: 5
      });
      break;
    default:
      break;
  }
};

let delIds: number[] = []; // 储存要删除表格数据的id
const del = (
  id: number,
  index: number,
  type: 'wenJian' | 'ziChan' | 'ziYuan' | 'riChang' | 'daiBan'
) => {
  if (id) delIds.push(id);
  formData[type].splice(index, 1);
};

let humanModalVisible = ref(false); // 人员弹框
let currIndex = -1, // 当前选中表格的index
  currType = ''; // 当前选中表格的type

// 显示人员弹框
const showHumanModal = (
  index: number,
  type: 'wenJian' | 'ziChan' | 'ziYuan' | 'riChang' | 'daiBan'
) => {
  humanModalVisible.value = true;
  currIndex = index;
  currType = type;
};
const humanRosterEmit = (record: any) => {
  formData[currType][currIndex].userId = record.id;
};

let uploadRef = ref();
// 资源移交上传文件
const uploadFile = async (fileItem: any, record: any) => {
  try {
    Message.success('上传文件成功!');
  } catch (error: unknown) {
    console.log(error);
  }
};

const beforeFileUpload = (file: any, record: any) => {
  return new Promise((resolve, reject) => {
    record.url = [];
    resolve(true);
  });
  // console.log('====================================');
  // console.log('before', file, record);
  // console.log('====================================');
};

// 资源移交上传文件

const beforeFileRemove = (file: any, record: any) => {
  return new Promise((resolve, reject) => {
    Modal.confirm({
      title: '删除文件',
      content: `确认删除 ${file.name}`,
      onOk: () => {
        console.log('====================================');
        console.log(file);
        console.log('====================================');
        record.url = [];
        resolve(true);
      },
      onCancel: () => reject('cancel')
    });
  });
};
// 将对象转化为数组
function flattenNestedArrays(obj) {
  const result = [];

  function processValue(value) {
    if (Array.isArray(value)) {
      value.forEach((item) => {
        processValue(item);
      });
    } else {
      result.push(value);
    }
  }

  Object.values(obj).forEach((value) => {
    processValue(value);
  });

  return result;
}

// 保存
const save = async () => {
  try {
    if (await refForm.value.validate()) {
      Message.error('请填写必填项');
      return;
    }
    const handovers = flattenNestedArrays(cloneDeep(formData));
    for (let i of handovers) {
      if (i.type === 5) {
        i.url = JSON.stringify(
          i.url.map((item: any) => {
            return {
              url: item.response?.data || item.url,
              uid: item.uid,
              name: item.name
            };
          })
        );
      }
    }
    await PostLeaveHandoverDetail({
      handovers
    });
    if (delIds.length > 0)
      await DelLeaveHandoverDetail({
        ids: delIds
      });
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style scoped lang="less">
.wrap {
  width: 90%;
  .main-header {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  section {
    margin-bottom: 20px;
    header {
      display: flex;
      align-items: center;
      height: 46px;
      background-color: #e8f0ff;
      padding-left: 20px;
      margin-bottom: 20px;
      &::before {
        position: relative;
        content: '';
        display: inline-block;
        border-radius: 4px;
        width: 6px;
        height: 20px;
        background-color: #3d7eff;
        right: 10px;
      }
    }
    .icon {
      cursor: pointer;
    }
    .star::before {
      content: '*';
      color: red;
    }
  }

  footer {
    height: 50px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
</style>
